<template>
  <div>
    <TreeSelect v-model="selectedValue" :data="treeData" :default-expanded-keys="['docs']" @change="handleChange">
      <!-- 自定义节点图标 -->
      <template #icon="{ node }">
        <span class="custom-icon">
          {{ node.icon || (node.children ? '📂' : '📝') }}
        </span>
      </template>

      <!-- 自定义箭头图标 -->
      <template #arrow-icon="{ expanded }">
        <span class="custom-arrow">
          {{ expanded ? '🔽' : '▶' }}
        </span>
      </template>
    </TreeSelect>

    <div style="margin-top: 20px;">
      当前选中值: {{ selectedValue }}
    </div>
  </div>
</template>

<script lang="tsx">
import { defineComponent, ref } from 'vue'
import TreeSelect, { TreeNode } from './tree-select.vue'

export default defineComponent({
  components: { TreeSelect },

  setup() {
    const selectedValue = ref<string | number | null>(null)

    const treeData = ref<TreeNode[]>([
      {
        label: '文档',
        value: 'docs',
        icon: '📚',
        children: [
          {
            label: '项目文档',
            value: 'project-docs',
            children: [
              { label: '需求文档', value: 'requirements' },
              { label: '设计文档', value: 'design' }
            ]
          },
          {
            label: 'API文档',
            value: 'api-docs',
            children: [
              { label: 'REST API', value: 'rest-api' },
              { label: 'GraphQL', value: 'graphql' }
            ]
          }
        ]
      },
      {
        label: '图片',
        value: 'images',
        children: [
          {
            label: '产品图片',
            value: 'product-images',
            children: [
              { label: '2023年', value: '2023' },
              { label: '2024年', value: '2024' }
            ]
          },
          { label: '用户头像', value: 'avatars' }
        ]
      },
      {
        label: '设置',
        value: 'settings',
        icon: '⚙️'
      }
    ])

    const handleChange = (node: TreeNode) => {
      console.log('选中节点:', node)
    }

    return {
      selectedValue,
      treeData,
      handleChange
    }
  }
})
</script>

<style>
.custom-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 4px;
}

.custom-arrow {
  font-size: 12px;
}
</style>